<template>
  <div>
    <div ref='pie' :style="{height:'200px',width:'100%'}"></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: 0,
        subtextS: '',
      }
    },
    props: {
      AnnularFigure: {
        type: Object
      },
      subtext: {
        type: String
      }
    },
    mounted() {
      this.value = this.AnnularFigure.total;
      this.subtextS = this.subtext;
      this.histogram();
    },
    methods: {
      histogram() {
        let option = {
            title: {
              text: this.value,
              subtext: this.subtextS,
              left: 'center',
              top: 75,
              center: ['40%', '30%'],
              textStyle: {
                color: '#000',
                fontSize: 25,
                fontFamily: 'DINAlternate-Bold'
              },
              subtextStyle: {
                color: '#000',
                fontSize: 11,
                fontFamily: 'PingFangSC-Regular',
                top: 'center'
              },
            },
            tooltip: {
              trigger: 'item',
              position: 'top',
              formatter: (data) => {
                if (this.AnnularFigure.result) {
                  let val;
                  for (let result of this.AnnularFigure.result) {
                    val += '<span>' + result.key + '<span style="float: right">' + '<span style="padding: 0 10px;color: #FF6600">' + result.doc_count + '</span>' + '篇</span>' + '</span><br/>'
                  }
                  let html = '<div style="padding: 10px 10px;font-weight: bold;width: 250px;font-size: 12px" v-html=' + val + '</div>';
                  return html;
                }
              },
            },
            series: [{
              type: 'pie',
              clockWise: true,
              radius: ['60%', '80%'],
              itemStyle: {
                normal: {
                  label: {
                    show: false
                  },
                  labelLine: {
                    show: false
                  },
                  color: '#FF6600',
                }
              },
              hoverAnimation: false,
              data: [
                {
                  value: this.value,
                  name: 'completed',
                  itemStyle: {
                    normal: {
                      borderWidth: 5,
                      label: {
                        show: false
                      },
                      labelLine: {
                        show: false
                      }
                    }
                  }
                },
                {
                  name: 'gap',
                  value: 100,
                  itemStyle: {
                    normal: {
                      label: {
                        show: false
                      },
                      labelLine: {
                        show: false
                      },
                      color: '#DFE6EE',
                      borderWidth: 0,
                    }
                  }
                }]
            }]
        };
        let myCharts = this.$echarts.init(this.$refs.pie);
        myCharts.setOption(option);
      }
    }
  }
</script>

<style scoped>

</style>
